<template>
  <div>
    <div class="location-box c-333 fz-14">
      <van-icon name="location-o" class="mr-10" />
      <div>
        <div class="c-999">
          <span class="mr-5 c-333">{{ orderData.receiverName }}</span>{{ orderData.receiverPhone }}
        </div>
        <div class="mt-5 c-333">{{ orderData.receiverAddress }}</div>
      </div>
    </div>
    <Map v-if="hasMap" ref="locationMapRef" :location="true" @afterInit="handleMapInit"></Map>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Map from '@/components/Map';

// 解析路径
function parseRouteToPath(route) {
  const path = []
  for (let i = 0, l = route.steps.length; i < l; i++) {
    const step = route.steps[i]
    for (let j = 0, n = step.path.length; j < n; j++) {
      path.push(step.path[j])
    }
  }
  return path
}

// 绘制路径
function drawRoute(map, route) {
  const path = parseRouteToPath(route)

  const routeMarker = new AMap.Polyline({
    path: path,
    outlineColor: '#ffeeee',
    borderWeight: 1,
    strokeWeight: 4,
    strokeOpacity: 0.9,
    strokeColor: '#0091ff',
    lineJoin: 'round'
  })

  map.add(routeMarker);

  // 调整视野达到最佳显示区域
  map.setFitView([routeMarker])
}

function drawPoint(map, {
  distance,
  time,
  longitude,
  latitude,
  deliveryLongitude,
  deliveryLatitude
}) {
  const start = new AMap.Marker({
    position: new AMap.LngLat(deliveryLongitude || 114.411103, deliveryLatitude || 23.112597),
    offset: new AMap.Pixel(-15, -45),
    icon: new AMap.Icon({
      image: 'https://oss.cdn.xiongmaodangao.com/images/local-delivery-icon.png', // 添加 Icon 图标 URL
      imageSize: [30, 40],
    }),
    label: { content: `距离您还有${distance}公里，预计${time}分钟后送达`, direction: 'top', offset: [0, -5] }
  });
  const end = new AMap.Marker({
    position: new AMap.LngLat(longitude || 114.417132, latitude || 23.110703),
    offset: new AMap.Pixel(-15, -45),
    icon: new AMap.Icon({
      image: 'https://oss.cdn.xiongmaodangao.com/images/local-delivery-target-icon.png', // 添加 Icon 图标 URL
      imageSize: [30, 40],
    }),
  });
  map.add([start, end])
}

export default defineComponent({
  props: {
    orderData: {
      type: Object,
      default: () => { }
    },
    hasMap: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const locationMapRef = ref(null)
    console.log(props)
    const { longitude, latitude, deliveryLongitude, deliveryLatitude } = props.orderData
    if (!longitude || !latitude || !deliveryLongitude || !deliveryLatitude) {
      return
    }

    function handleMapInit(map) {
      AMap.plugin('AMap.Driving', function () {
        const drivingOption = {
          policy: AMap.DrivingPolicy.LEAST_DISTANCE,
        }
        let driving = new AMap.Driving(drivingOption)
        driving.search(new AMap.LngLat(deliveryLongitude, deliveryLatitude), new AMap.LngLat(longitude, latitude), (status, result) => {
          if (status === 'complete') {
            if (result.routes && result.routes.length) {
              // 绘制第一条路线，也可以按需求绘制其它几条路线
              const first = result.routes[0]
              drawRoute(map, first)
              drawPoint(map, {
                distance: (first.distance / 1000).toFixed('1'),
                time: Math.ceil(first.time / 60),
                longitude,
                latitude,
                deliveryLongitude,
                deliveryLatitude,
              })
            }
          }
        })
      })
    }

    return {
      locationMapRef,
      handleMapInit
    }
  },
  components: {
    Map
  }
})
</script>

<style lang="less" scoped>
.location-box {
  padding: 10px;
  display: flex;
  align-items: center;
}
</style>
